<template>
  <div>
    <el-form v-loading="!formData||!periodDict" :model="formData" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="formData.name" maxlength="20" show-word-limit />
      </el-form-item>
      <div v-if="rootFlag">
        <el-form-item label="父类型">
          <el-select v-model="formData.parentId" placeholder="用于填写多级奖励">
            <el-option
              v-for="item in rewardList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form :inline="true" label-width="80px">
          <el-form-item label="周期" :inline="true">
            <el-select v-model="formData.period">
              <el-option
                v-for="item in periodDict"
                :key="item.id"
                :label="item.alias"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-color-picker v-model="formData.color" show-alpha />
          </el-form-item>
        </el-form>
        <el-form-item label="应用单位">
          <CompanySelector :code.sync="formData.companyCode" style="width:10rem" />
        </el-form-item>
        <el-form-item label="启用时间">
          <el-date-picker
            v-model="formData.startTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="失效时间">
          <el-date-picker
            v-model="formData.endTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </div>
      <el-form-item label="描述">
        <el-input v-model="formData.description" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formData)">立即提交</el-button>
        <el-button @click="resetForm(formData)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { RewardInfo } from '@/api/zzxt/reward'
export default {
  name: 'RewardManageForm',
  components: {
    CompanySelector: () => import('@/components/Company/CompanySelector')
  },
  props: {
    data: {
      type: Object,
      default: null
    },
    list: { type: Array, default: null }
  },
  data: () => ({
    formData: null,
    rewardList: null,
    rootFlag: false
  }),
  computed: {
    currentCompany() {
      return this.$store.state.user.globalCompany
    },
    periodDict() {
      return this.$store.state.party.RankType
    }
  },
  watch: {
    data: {
      handler(val) {
        this.rootFlag = val.rootFlag === undefined
        if (val) this.formData = val
        else {
          this.formData = {
            color: 'rgba(215, 22, 22, 1)',
            companyCode: this.currentCompany
          }
        }
      },
      immediate: true
    },
    list: {
      handler(val) {
        this.rewardList = val
      },
      immediate: true
    }
  },
  methods: {
    submitForm(formData) {
      RewardInfo(formData)
        .then(data => {
          this.$message.success('提交成功')
          this.$emit('requireRefresh')
        })
        .catch(e => {
          this.$message.warn('提交失败，信息填写有误')
        })
    }
  }
}
</script>
